<template>
  <div>
    <!-- 轮播图 -->
    <div class="box__1">
      <div class=" box_2">
        <el-carousel :interval="5000" arrow="always" indicator-position="none">
          <el-carousel-item v-for="item in form" :key="item.id" class="el-box">
            <img :src="item.n_img" class="medium" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <div id="myChart2"></div>
    </div>
    <!-- 图表 -->
    <div class="box">
      <div id="myChart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
let category = [];

  let dottedBase = +new Date();
  let lineData = [];
  let barData = [];
  for (let i = 0; i < 20; i++) {
    let date = new Date((dottedBase += 3600 * 24 * 1000));
    category.push(
      [date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-')
      );
      let b = Math.random() * 200;
      let d = Math.random() * 200;
      barData.push(b);
      lineData.push(d + b);
    }
//  
export default {
  data() {
    return {
      form:[],
      // 访问来源图表
      
      option : {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['新品推荐', '明星产品', '唇妆', '眼妆', '底妆', '刷具', '护肤']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '在线咨询',
      type: 'bar',
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '订单情况',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '运输情况',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '魅可定制美妆',
      type: 'bar',
      stack: 'Ad',
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '购买人数',
      type: 'bar',
      data: [862, 1018, 964, 1026, 1679, 1600, 1570],
      emphasis: {
        focus: 'series'
      },
      markLine: {
        lineStyle: {
          type: 'dashed'
        },
        data: [[{ type: 'min' }, { type: 'max' }]]
      }
    },
    {
      name: '线下门店',
      type: 'bar',
      barWidth: 5,
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [620, 732, 701, 734, 1090, 1130, 1120]
    },
    {
      name: 'M·A·C专业会员',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 290, 230, 220]
    },
    {
      name: '售后情况',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [60, 72, 71, 74, 190, 130, 110]
    },
    {
      name: '关注店铺',
      type: 'bar',
      stack: 'Search Engine',
      emphasis: {
        focus: 'series'
      },
      data: [62, 82, 91, 84, 109, 110, 120]
    }
  ]
},



  // option
option2 : {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['整体趋势', '微信公众号运营','社会化电商','短视频/直播'],
    textStyle: {
      color: '#ccc'
    }
  },
  xAxis: {
    data: category,
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  yAxis: {
    splitLine: { show: false },
    axisLine: {
      lineStyle: {
        color: '#ccc'
      }
    }
  },
  series: [
    {
      name: '整体趋势',
      type: 'line',
      smooth: true,
      showAllSymbol: true,
      symbol: 'emptyCircle',
      symbolSize: 15,
      data: lineData
    },
    {
      name: '微信公众号运营',
      type: 'bar',
      barWidth: 10,
      itemStyle: {
        borderRadius: 5,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#14c8d4' },
          { offset: 1, color: '#43eec6' }
        ])
      },
      data: barData
    },
    {
      name: '社会化电商',
      type: 'bar',
      barGap: '-100%',
      barWidth: 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(20,200,212,0.5)' },
          { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
          { offset: 1, color: 'rgba(20,200,212,0)' }
        ])
      },
      z: -12,
      data: lineData
    },
    {
      name: '短视频/直播',
      type: 'pictorialBar',
      symbol: 'rect',
      itemStyle: {
        color: '#0f375f'
      },
      symbolRepeat: true,
      symbolSize: [12, 4],
      symbolMargin: 1,
      z: -10,
      data: lineData
    }
  ]
}
    };
  },
  methods: {
    
  },
  mounted() {
    var myChart = echarts.init(document.getElementById("myChart"));
    myChart.setOption(this.option);
    var myChart2 = echarts.init(document.getElementById("myChart2"));
    myChart2.setOption(this.option2);

    this.$http.newarrivalsApi.queryAll().then((res) => {
      this.form = res.data.data;
    });
  },
};

//自启动
</script>

<style lang="scss" scoped>
.box {
  width: 1240px;
  margin: 0 auto;
  display: flex;
}

#myChart {
  width: 1240px;
  height: 400px;
  border-radius: 10px;
}
#myChart2 {
  width: 940px;
  height: 400px;
  border-radius: 20px;
}
.box__1{
  width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.box_2{
  width: 300px;
  margin-top: 50px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .medium{
    width: 300px;
    border-radius: 10px;
  }
.el-box{
  border-radius: 10px;
}
</style>